<template>
  <div>
    <van-card :desc="'账号:' + tel" :title="'昵称:' + name" :thumb="thumb" style="background-color: aqua" @click="onEdit" />
    <van-cell is-link title="帮助与反馈" @click="show1 = true" />
    <van-action-sheet v-model="show1" :actions="actions1" @select="onSelect" />
    <van-action-sheet v-model="show1" title="帮助与反馈">
      <div class="content">
        帮助与反馈少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所
      </div>
    </van-action-sheet>
    <van-cell is-link title="用户协议" @click="show2 = true" />
    <van-action-sheet v-model="show2" :actions="actions2" @select="onSelect" />
    <van-action-sheet v-model="show2" title="用户协议">
      <div class="content">
        用户协议帮助与反馈少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所
      </div>
    </van-action-sheet>
    <van-cell is-link title="隐私协议" @click="show3 = true" />
    <van-action-sheet v-model="show3" :actions="actions3" @select="onSelect" />
    <van-action-sheet v-model="show3" title="隐私协议">
      <div class="content">
        隐私协议少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所
      </div>
    </van-action-sheet>
    <van-cell is-link title="关于" @click="show4 = true" />
    <van-action-sheet v-model="show4" :actions="actions3" @select="onSelect" />
    <van-action-sheet v-model="show4" title="关于">
      <div class="content">
        关于协议少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所
      </div>
    </van-action-sheet>
    <van-button type="danger" @click="tologin()">退出登录</van-button>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      name: "张三",
      tel: "13000000000",
      thumb: "https://img01.yzcdn.cn/vant/cat.jpeg",
      show1: false,
      actions1: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
      show2: false,
      actions2: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
      show3: false,
      actions3: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
      show4: false,
      actions4: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
    };
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    tologin() {
      window.localStorage.clear();
      this.$router.push("login");
    },
    onEdit() {
      Toast("编辑");
    },
  },
};
</script>
<style>
.content {
  padding: 16px 16px 160px;
}
</style>